<template>
	<view class="app app-bg">
		<u-cell-group>
			<u-cell-item
				v-if="isBindMobileCom"
				:value="bindMobileCom"
				:label-style="labelStyle"
				:title="$t('setting.modify-mobile')"
				:label="$t('setting.modify-mobile-tips')"
				@click="pageTo('/pages/user/setting/update-mobile?pageIndex=0')"
			></u-cell-item>
			<u-cell-item
				v-else
				:label-style="labelStyle"
				:value="$t('setting.click-bind')"
				:title="$t('setting.bind-mobile')"
				:label="$t('setting.bind-mobile-tips')"
				@click="pageTo('/pages/user/setting/update-mobile?pageIndex=1')"
			></u-cell-item>
			<u-cell-item
				v-if="isBindMobileCom"
				:label-style="labelStyle"
				:title="$t('setting.modify-login-password')"
				:label="$t('setting.modify-login-password-tips')"
				@click="pageTo('/pages/user/setting/update-password')"
			></u-cell-item>
			<u-cell-item
				label="设置支付密码用于余额支付"
				title="支付密码"
				:label-style="labelStyle"
				@click="pageTo('/pages/user/setting/update-payword')"
			></u-cell-item>
			<u-cell-item
				style="border-top: 20rpx solid #f5f5f5"
				title="注销账号"
				@click="show = true"
			></u-cell-item>
		</u-cell-group>
		<u-modal
			show-cancel-button
			v-model="show"
			:content="content"
			@confirm="confirm"
		></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			labelStyle: { color: "#C0C0C0", fontSize: "24rpx" },
			content: "注销账号后将无法再登录，确认注销么？",

			show: false
		}
	},
	methods: {
		pageTo(path) {
			vk.navigateTo(path)
		},
		confirm() {
			vk.callFunction({
				url: "client/user.closeOff",
				title: "注销中..."
			}).then(() => {
				vk.toast("注销成功！", "none", 1000, () => {
					uni.$emit("clearInfo")
					vk.navigateBack()
				})
			})
		}
	},
	computed: {
		isBindMobileCom() {
			let userInfo = vk.getVuex("$user.userInfo")
			return userInfo && userInfo.mobile ? true : false
		},
		bindMobileCom() {
			let mobile = vk.getVuex("$user.userInfo.mobile")
			return vk.pubfn.hidden(mobile, 3, 4)
		}
	}
}
</script>

<style lang="scss" scoped>
/deep/ .u-cell {
	padding: 20rpx 24rpx !important;
}

/deep/ .u-cell__label {
	margin-top: 0 !important;
}
</style>
